<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>QQ音乐 - 千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
		<link rel="shortcut icon" href="/images/favicon.ico" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.min.css">
	</head>

	<body>
		<!--首页-->
		<div class="web">
			<header>
				<div class="logo">
					<div class="logo_img">
						<img src="images/favicon.ico" />
					</div>
					<span>QQ音乐</span>
				</div>
				<div class="download">
					<a href="#">下载APP</a>
				</div>
			</header>
			<!--内容-->
			<section>
				<!--导航-->
				<div class="nav">
					<ul class="nav_ul">
						<li class="active">
							推荐
						</li>
						<li>
							排行榜
						</li>
						<li>
							搜索
						</li>
					</ul>
				</div>
				
					<div class="cont_wrap">
						<!--推荐-->
				<div class="content_box block">
					<!--轮播图-->
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<!--<div class="swiper-slide"><img src="images/lunbo1.jpg" /></div>
							<div class="swiper-slide"><img src="images/lunbo2.jpg" /></div>
							<div class="swiper-slide"><img src="images/lunbo3.jpg" /></div>
							<div class="swiper-slide"><img src="images/lunbo4.jpg" /></div>
							<div class="swiper-slide"><img src="images/lunbo5.jpg" /></div>-->
						</div>
						<!-- 如果需要分页器 -->
						<div class="swiper-pagination"></div>
					</div>
					<!--电台-->
					<div class="station_box">
						<h3 class="station_title">电台</h3>
						<ul class="station_ul">
							
						</ul>
					</div>
					<!--热门歌单-->
					<div class="Popular_song">
						<h3 class="Popular_song_title">热门歌单</h3>
						<ul class="Popular_song_ul clearfix">
							<!--<li>
								<div class="song_img">
									<img src="images/station2.jpg" />
									<i class="iconfont icon-play2"></i>
									
								</div>
								<div class="song_con">
									<p class="song_title">
										催泪大杀器！盘点演唱会经典万人大合唱
									</p>
									<p class="song_author">Harry</p>
								</div>
							</li>-->

							<!--<li>
								<div class="song_img">
									<img src="images/station2.jpg" />
									<i class="iconfont icon-play2"></i>
								</div>
								<div class="song_con">
									<p class="song_title">
										催泪大杀器！盘点演唱会经典万人大合唱
									</p>
									<p class="song_author">Harry</p>
								</div>
							</li>

							<li>
								<div class="song_img">
									<img src="images/station2.jpg" />
									<i class="iconfont icon-play2"></i>
								</div>
								<div class="song_con">
									<p class="song_title">
										催泪大杀器！盘点演唱会经典万人大合唱
									</p>
									<p class="song_author">Harry</p>
								</div>
							</li>

							<li>
								<div class="song_img">
									<img src="images/station2.jpg" />
									<i class="iconfont icon-play2"></i>
								</div>
								<div class="song_con">
									<p class="song_title">
										催泪大杀器！盘点演唱会经典万人大合唱
									</p>
									<p class="song_author">Harry</p>
								</div>
							</li>

							<li>
								<div class="song_img">
									<img src="images/station2.jpg" />
									<i class="iconfont icon-play2"></i>
								</div>
								<div class="song_con">
									<p class="song_title">
										催泪大杀器！盘点演唱会经典万人大合唱
									</p>
									<p class="song_author">Harry</p>
								</div>
							</li>

							<li>
								<div class="song_img">
									<img src="images/station2.jpg" />
									<i class="iconfont icon-play2"></i>
								</div>
								<div class="song_con">
									<p class="song_title">
										催泪大杀器！盘点演唱会经典万人大合唱
									</p>
									<p class="song_author">Harry</p>
								</div>
							</li>-->
						
						
						</ul>
						<span class="list_most"><a href="">去客户端发现更多好音乐 ></a></span>
					</div>
					<!--尾部-->
					<div class="footer">
						<div class="version_tab">
							<a href="http://y.qq.com/?ADTAG=myqq&nomobile=1#type=index">查看电脑版网页</a>
						</div>
						<div class="footer_logo">
							<div class="logo_img">
								<img src="images/favicon.ico" />
							</div>
							<span>QQ音乐</span>
						</div>
						<p class="copyright">Copyright © 1998 - <span id="js_cpright_year">2018</span> Tencent. All Rights Reserved.</p>
						<p id="js_iosinfo" class="copyright">联系电话：0755-86013388 QQ群：55209235</p>
					</div>
				</div>

				<!--排行榜-->
				<div class="ranking_box">
					<ul class="ranking_list">
					
					</ul>

				</div>
				
				
				<!--搜索-->
				<div class="seek_box">
					<div class="search_box">
						<div class="search_con">
							<i class="iconfont icon-fangdajing"></i>
							<input type="text" placeholder="搜索歌曲、歌单、专辑"/>
						</div>
					</div>
					
					<div class="tags">
						<h3>热门搜索</h3>
						<div class="result_tags">
							<span class="tags_list change">
								<a href="https://y.qq.com/m/act/voiceofdreams2/v3/index.html?ADTAG=myqq">我是歌手第三季</a>
							</span>
						</div>
					</div>
				
				</div>
		
					</div>
				
		</div>
		</section>

		</div>
	</body>
	<script src="js/swiper.min.js"></script>
	<script>
			var mySwiper = new Swiper('.swiper-container', {
			observer:true,
			observeParents:false,
			rection: 'horizontal',
			speed: 1000,
			autoplay: {
				delay: 800,
				//    stopOnLastSlide: true,
				disableOnInteraction: false,
			},
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
			},
		})
//		mySwiper.pagination.update();
	</script>
	
	<script type="text/javascript">
		function tabs(){
			var lis = document.querySelectorAll(".nav .nav_ul li");
			var cont = document.querySelectorAll(".cont_wrap>div");
			for(let i=0;i<lis.length;i++){
				lis[i].addEventListener("click",function(){
				for(var j=0;j<cont.length;j++){
					cont[j].classList.remove("block")
					lis[j].classList.remove("active")
				}
				cont[i].classList.add("block")
				lis[i].classList.add("active")
				
				})
			}
			
		}
		tabs()
	</script>
	<script src="js/Text_together.js" type="text/javascript" charset="utf-8"></script>
</html>